<link rel="stylesheet" href="assets/js/core/jstree/themes/default/style.min.css">

<div class="container-fluid">
    <h4 class="page-title">组织机构树</h4>
    <!--表格-->
    <div class="col-md-4" >

    </div>
    <div class="col-md-4" >
        <button type="button" class="btn btn-success" data-toggle="modal" data-target="#newDept" onclick="setOpt('add')">新增</button><!-data-toggle="modal" data-target="#doMenu"-->
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#newDept" onclick="setOpt('edit')">编辑</button>
        <button type="button" class="btn btn-danger" onclick="doDelDept()">删除</button>
        <button type="button" class="btn btn-success" onclick="refreshTree()">刷新</button>
        <div id="treeview1" ></div><!--class="treeview"-->
    </div>
    <div class="col-md-4" ></div>
</div>

<script src="assets/js/core/jstree/jstree.js"></script>
<script>
    var token;
    var deptTree;
    $(function () {
        // debugger
        token = sessionStorage.getItem('token')
        //var oTable = new TableInit();
        //oTable.Init();
        //getPower()
        //dialogueMessage()
        //audit();
        //roleSelect();
        initDepartmentTree();
        //clearForm();
    });

    function initDepartmentTree(){
        deptTree = $('#treeview1');
        $('#treeview1').data('jstree', false).empty();
        $.getJSON('/oa/t-department/listTree?token='+token, function(json){
            console.log(json);
            $('#treeview1').jstree({
                "core": {
                    'data': json.data
                },
                "types" : {
                    "#" : {
                        "max_children" : 1,
                        "max_depth" : 4,
                        "valid_children" : ["root"]
                    },
                    "root" : {
                        "icon" : "/static/3.3.12/assets/images/tree_icon.png",
                        "valid_children" : ["default"]
                    },
                    "default" : {
                        "valid_children" : ["default","file"]
                    },
                    "file" : {
                        "icon" : "glyphicon glyphicon-file",
                        "valid_children" : []
                    }
                },
                "plugins" : [
                    "contextmenu", "dnd", "search",
                    "state", "types", "wholerow"
                ]
            })
        });
        $('#treeview1').on('changed.jstree',function (node,data){
            //console.log(node);
            //console.log(data.node.original);
            let id = data.instance.get_node(data.selected[0]).id;//节点点击事件 获取ID
            let name = data.instance.get_node(data.selected[0]).text;
            let parentId = data.node.original.parentId;
            let desc = data.node.original.desc;
            console.log(id + "===" + name + "===" + parentId + "===" + desc);
            $('#parentId').val(parentId);
            $('#name').val(name);
            $('#desc').val(desc);
            $('#deptId').val(id);
            //ClickMenuTree(id);
        });
        $('#treeview1').on('loaded.jstree', function (e, data) {
            data.instance.open_all();//默认展开所有节点
        })
    }

    function clearForm(){
        $('#deptId').val("");
        $('#parentId').val("");
        $('#name').val("");
        $('#desc').val("");
        $('#opt').val("");
    }

    function setOpt(opt) {
        $('#opt').val(opt);
        if(opt=='add'){
            $('#parentId').val("");
            $('#name').val("");
            $('#desc').val("");
            //$('#opt').val("");
        }
    }
    function dealDept(){
        let opt = $("#opt").val();
        if(opt == 'edit'){
            doEditDept();
        }else{
            doAddDept();
        }
    }
    function doAddDept() {
        var parentId = $("#deptId").val();
        if(parentId == null || parentId == "") {
            parentId = 0;
        }
        var deptName = $("#name").val();
        var deptDesc = $("#desc").val();
        var param = {
            parentId : parentId,
            deptName : deptName,
            deptDesc : deptDesc
        };
        $.ajax({
            type : "post",
            dataType: 'json',
            url : '/oa/t-department/addDept',
            data: JSON.stringify(param),
            headers: {
                token: "" + token
            },
            contentType: 'application/json; charset=UTF-8',
            success : function(data) {
                if (data.code == 200){
                    refreshTree();
                }
                clearForm();
            },
            error : function() {
                clearForm();
            }
        });
    }
    function doEditDept() {
        let parentId = $('#parentId').val();
        let name = $('#name').val();
        let desc = $('#desc').val();
        let id = $('#deptId').val();
        let param = {
            parentId: parentId,
            deptId: id,
            deptName: name,
            deptDesc: desc
        }
        $.ajax({
            type : "post",
            dataType: 'json',
            url : '/oa/t-department/updateDept',
            data: JSON.stringify(param),
            headers: {
                token: "" + token
            },
            contentType: 'application/json; charset=UTF-8',
            success : function(data) {
                if (data.code == 200){
                    refreshTree();
                }
                clearForm();
            },
            error : function() {
                clearForm();
            }
        });
    }

    function doDelDept() {
        let deptId = $("#deptId").val();
        let param = {
            deptId : deptId
        };
        $.ajax({
            type : "post",
            dataType: 'json',
            url : '/oa/t-department/deleteDept',
            data: param,
            headers: {
                token: "" + token
            },
            //contentType: 'application/json; charset=UTF-8',
            success : function(data) {
                if (data.code == 200 && data.msg == "删除成功"){
                    $('#treeview1').jstree('destroy');
                    $('#treeview1').data('jstree', false).empty();
                    $.getJSON('/oa/t-department/listTree?token='+token, function(json){
                        console.log(json);
                        $('#treeview1').jstree({
                            "core": {
                                'data': json.data
                            },
                            "types" : {
                                "#" : {
                                    "max_children" : 1,
                                    "max_depth" : 4,
                                    "valid_children" : ["root"]
                                },
                                "root" : {
                                    "icon" : "/static/3.3.12/assets/images/tree_icon.png",
                                    "valid_children" : ["default"]
                                },
                                "default" : {
                                    "valid_children" : ["default","file"]
                                },
                                "file" : {
                                    "icon" : "glyphicon glyphicon-file",
                                    "valid_children" : []
                                }
                            },
                            "plugins" : [
                                "contextmenu", "dnd", "search",
                                "state", "types", "wholerow"
                            ]
                        })
                    });
                }else{
                    alert(data.message);
                }
            },
            error : function() {
                clearForm();
            }
        });

    }

    function refreshTree(){
        //initDepartmentTree();
        //$('#treeview1').jstree(true).refresh();
        $('#treeview1').jstree('destroy');
        $('#treeview1').data('jstree', false).empty();
        $.getJSON('/oa/t-department/listTree?token='+token, function(json){
            console.log(json);
            $('#treeview1').jstree({
                "core": {
                    'data': json.data
                },
                "types" : {
                    "#" : {
                        "max_children" : 1,
                        "max_depth" : 4,
                        "valid_children" : ["root"]
                    },
                    "root" : {
                        "icon" : "/static/3.3.12/assets/images/tree_icon.png",
                        "valid_children" : ["default"]
                    },
                    "default" : {
                        "valid_children" : ["default","file"]
                    },
                    "file" : {
                        "icon" : "glyphicon glyphicon-file",
                        "valid_children" : []
                    }
                },
                "plugins" : [
                    "contextmenu", "dnd", "search",
                    "state", "types", "wholerow"
                ]
            })
        });
        $('#treeview1').on('changed.jstree',function (node,data) {
            //console.log(node);
            //console.log(data.node.original);
            let id = data.instance.get_node(data.selected[0]).id;//节点点击事件 获取ID
            let name = data.instance.get_node(data.selected[0]).text;
            let parentId = data.node.original.parentId;
            let desc = data.node.original.desc;
            console.log(id + "===" + name + "===" + parentId + "===" + desc);
            $('#parentId').val(parentId);
            $('#name').val(name);
            $('#desc').val(desc);
            $('#deptId').val(id);
        });
        $('#treeview1').on('loaded.jstree', function (e, data) {
            data.instance.open_all();//默认展开所有节点
        })
    }
</script>